import React, { Component } from "react";
import echarts from 'echarts'
import "echarts/map/js/china"
import "../../index.scss";

interface IProps {

}
interface IState {
}

// 销售分布
export default class SaleMap extends Component<IProps, IState> {
    private chart: any
    private option: any = {
        title:{
            text:"食品主要销售区域",
            top:50,
            left:"35%",
            textStyle:{
                fontSize:25
            }
        },
        visualMap: [
            {
                min: -100,
                max: 100,
                left: 26,
                bottom: 40,
                showLabel: !0,
                text: ["单位/个"],
                inverse:true,
                pieces: [{
                    lt: 0,
                    label: "0",
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0, color: '#08cc67' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#67f1d5' // 100% 处的颜色
                        }],
                    },
                }, {
                    egt: 0,
                    lt: 5,
                    label: "0~5",
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0, color: '#009aff' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#0ae5fe' // 100% 处的颜色
                        }],
                    }
                }, {
                    egt: 5,
                    lt: 10,
                    label: "5~10",
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0, color: '#facf00' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#fde8bf' // 100% 处的颜色
                        }],
                    }
                }, {
                    egt: 11,
                    lt: 20,
                    label: "11~20",
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0, color: '#f67310' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#fecba2' // 100% 处的颜色
                        }],
                    }

                }, {
                    gt: 21,
                    label: "21~",
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0, color: '#ff2c00' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#ffadad' // 100% 处的颜色
                        }],
                    }
                }],
            },
        ],
        // 地理坐标系组件
        geo: {
            map: "china",
            zoom: 1.23,
            top: 120,
            label: {
                normal: {
                    show: !0,
                    fontSize: "14",
                    color: "rgba(0,0,0,0.7)"
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 50,
                    shadowColor: '#d6ebf5',
                    borderColor: "#fff",
                    borderWidth: 2,
                },
                // emphasis: {
                //     areaColor: "#f2d5ad",
                // }
            }
        },
        series: [
            {
                name: "排队占签入比",
                type: "map",
                geoIndex: 0,
                data: []
            },
            {
                name: "时段15s人工接通率",
                type: "map",
                geoIndex: 0,
                data: []
            },
            {
                name: "预计当日累计15s接通率",
                type: "map",
                geoIndex: 0,
                data: []
            },
            {
                name: "当日资源规划值",
                type: "map",
                geoIndex: 0,
                data: []
            },
            {
                name: "空闲占签入比",
                type: "map",
                geoIndex: 0,
                data: []
            }
        ]
    };
    private dataList = [
        {
            name: "南海诸岛",
            value: 0
        },
        {
            name: '北京',
            value: 54
        },
        {
            name: '天津',
            value: 13
        },
        {
            name: '上海',
            value: 40
        },
        {
            name: '重庆',
            value: 75
        },
        {
            name: '河北',
            value: 13
        },
        {
            name: '河南',
            value: 3
        },
        {
            name: '云南',
            value: 1
        },
        {
            name: '辽宁',
            value: 19
        },
        {
            name: '黑龙江',
            value: -15
        },
        {
            name: '湖南',
            value: 69
        },
        {
            name: '安徽',
            value: 0
        },
        {
            name: '山东',
            value: 39
        },
        {
            name: '新疆',
            value: -10
        },
        {
            name: '江苏',
            value: 31
        },
        {
            name: '浙江',
            value: 104
        },
        {
            name: '江西',
            value: 36
        },
        {
            name: '湖北',
            value: 1052
        },
        {
            name: '广西',
            value: 33
        },
        {
            name: '甘肃',
            value: 7
        },
        {
            name: '山西',
            value: 9
        },
        {
            name: '内蒙古',
            value: 0
        },
        {
            name: '陕西',
            value: 22
        },
        {
            name: '吉林',
            value: 0
        },
        {
            name: '福建',
            value: 18
        },
        {
            name: '贵州',
            value: 5
        },
        {
            name: '广东',
            value: 98
        },
        {
            name: '青海',
            value: 1
        },
        {
            name: '西藏',
            value: 0
        },
        {
            name: '四川',
            value: 0
        },
        {
            name: '宁夏',
            value: 4
        },
        {
            name: '海南',
            value: -10
        },
        {
            name: '台湾',
            value: 3
        },
        {
            name: '香港',
            value: 5
        },
        {
            name: '澳门',
            value: 5
        }
    ]
    public componentDidMount() {
        this.chart = echarts.init(document.getElementById("chart") as HTMLCanvasElement)
        this.option.series[0].data = this.dataList
        this.option.series[1].data = this.dataList
        this.option.series[2].data = this.dataList
        this.option.series[3].data = this.dataList
        this.option.series[4].data = this.dataList
        this.chart.setOption(this.option)
    }
    public render() {
        return (
            <div className="warn-box">
                <div className="warn-chart" id="chart">
                </div>
            </div>
        )
    }
}

